<template>
	<view class="l_pages">
		<jnavbar title="奖励列表"></jnavbar>
		<scroll-view class="page_container tab_page_container" scroll-y>
			<view class="content">
				<view class="title">会员好礼</view>
				<view class="content-box">
					<view :class="item.level>userInfo.level?'fill':''" class="box-item " v-for="(item,i) in dataList"
						:key="i" @click="tojump(item)">
						<view>VIP{{item.level}}</view>
						<u-icon class="icon" name="integral-fill"></u-icon>
						<view class="item-btn">{{item.level>userInfo.level?'未开通':'已下发'}}</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<uni-login ref="Login" @callback="getDataList"></uni-login>
	</view>
</template>

<script>

	export default {

		data() {
			return {
				dataList: [],
				userInfo: 0
			}
		},
		async onLoad() {
			await this.$getWx
			this.getDataList()
			let _this = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					_this.userInfo = res.data
				}
			});
		},
		methods: {
			getDataList() {
				this.$http('/membership/level', {}, 'get').then(res => {
					this.dataList = res.data.msg
				})
			},
			tojump(item) {
				this.Jumpurl({
					link: '../buymember/buymember?level_id=' + item.id + '&level=' + item.level,
					type: 1,
					level_id: item.id,
					level: item.level
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 0 15rpx;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			letter-spacing: 2rpx;
			padding: 25rpx 10rpx;
		}

		.content-box {
			display: flex;
			flex-wrap: wrap;

			.box-item {
				padding: 15rpx;
				box-sizing: border-box;
				text-align: center;
				width: 160rpx;
				background: #F9F9F9;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				border-radius: 20rpx;
				margin: 10rpx;

				.icon {
					color: #F2CB51;
					font-size: 52rpx;
					margin: 6rpx 0;
				}

				.item-btn {
					background: #7F99FF;
					box-shadow: 0 3rpx 6rpx rgba(127, 153, 255, 0.47);
					opacity: 1;
					border-radius: 8rpx;
					margin: auto;
					font-weight: 400;
					color: #FFFFFF;
					width: 108rpx;
					font-size: 24rpx;
					padding: 4rpx 0;
					letter-spacing: 2rpx;

				}

			}

			.fill {
				.icon {
					color: #999999;
					font-size: 52rpx;
					margin: 6rpx 0;
				}

				.item-btn {
					background: none;
					color: #999999;
					box-shadow: none;
				}
			}
		}
	}
</style>
